<!--
 * @Author: liuyonghu
 * @Date: 2021-11-26 10:14:29
 * @LastEditTime: 2021-11-28 23:16:52
 * @LastEditors: liuyonghu
 * @Description: 
 * @FilePath: /demos/echarts/flayline/flayLine.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>飞线图</title>
    <script src="../echarts.js"></script>
    <style>
      html {
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #2f4056;
      }
    </style>
  </head>
  <body>
    <div id="chart-box" style="width: 100%; height: 100%"></div>
    <script src="../jquery.min.js"></script>
    <script type="text/javascript">
      const chart = echarts.init(document.getElementById('chart-box'));

      $.ajax({
        url: './530000_full.json',
        success: function (result) {
          console.log(result);
          // const data = JSON.parse(result);
          setYNMap(result);
        },
      });

      function setYNMap(data) {
        echarts.registerMap('yns', data);
        const coord = data.features.map((val) => {
          return {
            name: val.properties.name,
            value: val.properties.center,
          };
        });
        const lines_coord = [];
        coord.forEach((v, index) => {
          index > 0 &&
            lines_coord.push({
              coords: [v.value, coord[0].value],
            });
        });
        debugger;
        //地市取简称
        data.features.forEach((v) => {
          v.properties.name =
            v.properties.name.indexOf('版纳') > -1
              ? v.properties.name.substr(0, 4)
              : v.properties.name.substr(0, 2);
        });
        echarts.registerMap('yns', data);
        const option = {
          title: {
            text: '云南省',
          },
          geo: {
            map: 'yns',
            zlevel: 10,
            // show: true,
            layoutCenter: ['50%', '50%'],
            roam: false,
            layoutSize: '90%',
            zoom: 1,
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 12,
                  color: '#43D0D6',
                },
              },
            },
            itemStyle: {
              normal: {
                color: '#062031',
                borderWidth: 1.1,
                borderColor: '#43D0D6',
              },
            },
            emphasis: {
              itemStyle: {
                areaColor: '#FFB800',
              },
              label: {
                show: false,
              },
            },
          },
          series: [
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 15,
              symbolSize: 8,
              rippleEffect: {
                period: 4,
                brushType: 'stroke',
                scale: 4,
              },
              itemStyle: {
                color: '#FFB800',
                opacity: 1,
              },
              data: coord.slice(1),
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 15,
              symbolSize: 12,
              rippleEffect: {
                period: 6,
                brushType: 'stroke',
                scale: 8,
              },
              itemStyle: {
                color: '#FA8C16',
                opacity: 1,
              },
              data: coord.slice(0, 1),
            },
            {
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 15,

              effect: {
                show: true,
                period: 5,
                trailLength: 0,
                symbol: 'arrow',
                color: '#ffd361',
                symbolSize: 3,
              },
              lineStyle: {
                normal: {
                  width: 3,
                  opacity: 0.6,
                  curveness: 0.2,
                  color: '#FFB800',
                },
              },
              data: lines_coord,
            },
          ],
        };
        chart.setOption(option);
        chart.on('click', function (params) {
          console.log(params);
        });
      }
    </script>
  </body>
</html>
